<template>
    <div>
        <h1>房号列表</h1>
        <div>
            房号名称:<input type="text" v-model="queryinfo.NName">
            房号编号:<input type="text" v-model="queryinfo.NCode">
            <input type="button" value="查询" class="btn btn-primary" @click="show">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>房号名称</th>
                    <th>房号编号</th>
                    <th>介绍</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list">
                    <th>{{ item.NName }}</th>
                    <th>{{ item.NCode }}</th>
                    <th>{{ item.NDesc }}</th>
                    <th>
                        <input type="button" value="修改" class="btn btn-primary" @click="">
                        <input type="button" value="删除" class="btn btn-primary" >
                    </th>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>共{{ data.totalPage }}页</span>
            <span>{{queryinfo.pageindex}}/{{ data.totalPage }}</span>
            <input type="button" value="首页" @click="gopage(1)">
            <input type="button" value="上一页" @click="gopage(queryinfo.pageindex-1)">
            <input type="button" value="下一页" @click="gopage(queryinfo.pageindex+1)">
            <input type="button" value="尾页" @click="gopage(data.totalPage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import moment from 'moment';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let queryinfo:any=reactive({
    pageindex:1,
    pagesize:2,
    NName:"",
    NCode:""
})

let data:any=reactive({
    "list": [],
    "totalCount": 0,
    "totalPage": 0,

})

onMounted(()=>{
    getlist()
})


const show=()=>{
    queryinfo.pageindex=1
    getlist()
}

const gopage=(num:any)=>{
    if(num<1){
        queryinfo.pageindex=1
        return
    }
    if(num>data.totalPage){
        queryinfo.pageindex=data.totalPage
        return
    }
    queryinfo.pageindex=num;
    getlist()
}

const getlist=()=>{
    axios({
        url:'/api/House/GetHouseNumList',
        method:'get',
        params:queryinfo
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
}

</script>

<style scoped>

</style>